import React, { Component } from 'react';
// 01: 引入 connect 高阶组件
import { connect } from 'react-redux';


class Test2 extends Component {
    render() {
        return (
            <div>
                我是test2组件 测试react-redu先
                <p onClick={this.props.addCount}>count:{this.props.count}</p>
                <p>username:{this.props.userinfo.username}</p>
            </div>
        );
    }
}

// 02: 在类组件外边定义两个映射函数

// 将仓库store中的state 映射到当前组件自身的props 属性上
function mapStateToProps(state) {
    // 该state 就是仓库store 中的state
    return state
}

//将修改reducer 的方法映射到 当前组件的props属性上
function mapDispatchToProps(dispatch) {
    // 该参数 dispatch就是 Store.dispatch 方法中的dispatch
    return {
        addCount() {
            dispatch({ type: '+', payload: 1 })
        },
        // ....
    }
}

// 03: 使用connect 这个高阶组件函数, 处理当前组件
// connect 表示连接
// connect 方法返回高阶组件函数 hoc ,然后再使用hoc 去处理当前组件,这样就将
// 当前state 和dispatch添加到当前组件的props 上了
export default connect(mapStateToProps, mapDispatchToProps)(Test2);
